<template>
    <div class="container">
        <!-- <div ref="targetElement" class="box">
            <img src="@/assets/back_manage_img/car.webp" alt="">
        </div>

        <el-button @click="playAnimation">开始</el-button>
        <el-button @click="pauseAnimation">暂停</el-button>
        <el-button @click="restartAnimation">重置</el-button> -->


        <dv-scroll-board :config="tableData" class="inline_dv_table" />
        <!-- <div class="box">
            <div class="test" :style="{ transform: `translateX(${positionX}rem) translateY(${positionY}rem)` }"
                @click="toggleMove">
                <img src="@/assets/back_manage_img/car.webp" alt="" >
            </div>
        </div> -->



        

    </div>
</template>

<script>
    import { doSetRem } from './setRem.js';
    import gsap from 'gsap';
    export default {

        data() {
            return {
                positionX: 0, // 初始水平位置
                positionY: 0, // 初始垂直位置
                interval: null,
                tableData: {
                    carousel: 'page',
                    waitTime: 5000,
                    headerBGC: '#F2F2F2',
                    oddRowBGC: '#fff',
                    evenRowBGC: '#F2F2F2',
                    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center',],
                    headerHeight: '50',
                    rowNum: 8,
                    header: ['罐号', '管坯料名', '主料(kg)', '辅料(kg)', '色母(kg)', '配比', '总料重(kg)', '配料人', '拌料时段', '搅拌时长(min)', '状态', '未出料(kg)', '操作'],
                    columnWidth: [80, 150, 150, 150, 150, 150, 150, 180, 250, 150, 150, 160, 150, 150,],
                    data: [[1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6]]
                },


                // targetElement: null,
                tl: null,
                pathPoints: [
                    { x: '1rem', y: '1rem', pause: 0 },
                    { x: '3rem', y: '1rem', pause: 1 },
                    { x: '5rem', y: '1rem', pause: 1 },
                    { x: '7rem', y: '1rem', pause: 1 },
                    { x: '7rem', y: '3rem', pause: 1 },
                    { x: '5rem', y: '3rem', pause: 1 },
                    { x: '3rem', y: '3rem', pause: 1 },
                    { x: '1rem', y: '3rem', pause: 1 },
                    { x: '1rem', y: '5rem', pause: 1 },
                    { x: '3rem', y: '5rem', pause: 1 },
                    { x: '5rem', y: '5rem', pause: 1 },
                    { x: '7rem', y: '5rem', pause: 1 },
                ]
            };
        },

        mounted() {
            doSetRem();
            // this.toggleMove(7)
            // this.startInterval();
            gsap.set(this.$refs.targetElement, {
                x: this.pathPoints[0].x,
                y: this.pathPoints[0].y
            })
            this.initAnimation()

        },
        beforeDestroy() {
            // this.stopInterval();
            if (this.tl) { this.tl.kill() }
        },
        methods: {
            // fontSizeRem(res) {
            //     let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            //     if (!clientWidth) return; //报错拦截：
            //     let fontSize = clientWidth > 1920 ? 100 * (clientWidth / 1920) : 100;
            //     return res * fontSize;
            // },
            pointS1() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionX = 1;
                        this.positionY = 0;
                        console.log(1);
                        resolve();
                    }, 1000)
                })
            },
            async pointS2() {
                await this.pointS1();
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionX = 2;
                        console.log(2)
                        resolve();
                    }, 1000)
                })
            },
            async pointS3() {
                await this.pointS2();
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionX = 3;
                        console.log(3)
                        resolve();
                    }, 1000)
                })
            },
            async pointS4() {
                await this.pointS3();
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionX = 4;
                        console.log(4)
                        resolve();
                    }, 1000)
                })
            },
            async pointS5() {
                await this.pointS4();
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionY = -1;
                        console.log(5)
                        resolve();
                    }, 1000)
                })
            },
            async pointS6() {
                await this.pointS5();
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionX = 3;
                        this.positionY = -1;
                        console.log(6)
                        resolve();
                    }, 1000)
                })
            },
            async pointS7() {
                await this.pointS6();
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.positionX = 2;
                        this.positionY = -1;
                        console.log(7)
                        resolve();
                    }, 1000)
                })
            },

            toggleMove(point) {
                if (point == 1) {
                    this.pointS1();
                } else if (point == 2) {
                    this.pointS2();
                } else if (point == 3) {
                    this.pointS3();
                } else if (point == 4) {
                    this.pointS4();
                } else if (point == 5) {
                    this.pointS5();
                } else if (point == 6) {
                    this.pointS6();
                } else if (point == 7) {
                    this.pointS7();
                }
            },
            startInterval() {
                this.refreshInterval = setInterval(() => {
                    this.toggleMove(1);
                }, 1000 * 2);
            },
            stopInterval() {
                if (this.interval) {
                    clearInterval(this.interval);
                    this.interval = null;
                }
            },


            initAnimation() {
                this.tl = gsap.timeline({
                    paused: true,        // 初始暂停
                    repeat: false,         // 无限循环
                    repeatDelay: 1      // 每次循环间隔
                })

                this.pathPoints.forEach((point, index) => {
                    // 移动动画
                    this.tl.to(this.$refs.targetElement, {
                        x: point.x,
                        y: point.y,
                        duration: 5,
                        ease: "power2.inOut",
                        overwrite: "auto"
                    }, `+=${index === 0 ? 0 : this.pathPoints[index - 1].pause}`)

                    // 添加停顿
                    this.tl.add(() => {
                        console.log(`到达点 ${index + 1}，坐标：(${point.x}, ${point.y})`)
                    }, `+=${point.pause}`)
                })
            },
            playAnimation() {
                this.tl.play()
            },
            pauseAnimation() {
                this.tl.pause()
            },
            restartAnimation() {
                this.tl.restart()
            }

        },
    };
</script>

<style lang="scss" scoped>
    .container {
        position: absolute;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .inline_dv_table {
        ::v-deep .header-item {
            font-size: 0.24rem !important;
        }

        ::v-deep .row-item {
            .ceil {
                font-size: 0.24rem !important;
            }
        }
    }

    /* .box {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        .test {
            transition: transform 0.2s ease;

            img {
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    } */

    .box {
        /* top: 50px; */
        /* width: 40px;
        height: 40px;
        background: #42b983; */
        position: absolute;
        will-change: transform;

        /* 优化性能 */
        img {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    button {
        margin: 0.1rem;
        padding: 0.08rem 0.16rem;
        cursor: pointer;
        font-size: 0.16rem;
    }
</style>